<!-- 经典布局 -->
<template>
	<el-container class="layout-classic">
		<el-header :style="{ height: headerHeight + 'px' }">
			<div class="header-lf">
				<div class="logo flx-center">
					<img v-if="!!sideLogo" :src="sideLogo" alt="logo" />
					<span>{{ systemTitle }}</span>
				</div>
				<ToolBarLeft />
			</div>
			<ToolBarRight />
		</el-header>
		<el-container class="classic-bottom">
			<el-aside calss="elAside">
				<div class="menu" :style="{ width: isCollapse ? '65px' : sideExpandWidth + 'px' }">
					<el-scrollbar>
						<el-menu
							:default-active="activeMenu"
							:router="false"
							:collapse="isCollapse"
							:collapse-transition="false"
							:unique-opened="true"
							:background-color="sideBgColorGet"
							:text-color="sideTextColorGet"
						>
							<SubMenu :menuList="menuList" />
						</el-menu>
					</el-scrollbar>
				</div>
			</el-aside>
			<el-container class="classic-bottom-right">
				<Main />
			</el-container>
		</el-container>
	</el-container>
</template>

<script setup lang="ts" name="layoutClassic">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { GlobalStore } from '@/stores'
import { AuthStore } from '@/stores/modules/auth'
import Main from '@/layouts/components/Main/index.vue'
import SubMenu from '@/layouts/components/Menu/SubMenu.vue'
import ToolBarLeft from '@/layouts/components/Header/ToolBarLeft.vue'
import ToolBarRight from '@/layouts/components/Header/ToolBarRight.vue'

const route = useRoute()
const authStore = AuthStore()
const globalStore = GlobalStore()
const activeMenu = computed(() => route.path)
const menuList = computed(() => authStore.showMenuListGet)
const isCollapse = computed(() => globalStore.themeConfig.isCollapse)
const sideExpandWidth = computed(() => globalStore.themeConfig.sideExpandWidth)
const headerHeight = computed(() => globalStore.themeConfig.headerHeight)
const sideLogo = computed(() => globalStore.themeConfig.sideLogo)
const systemTitle = computed(() => globalStore.themeConfig.systemTitle)
const sideBgColorGet = computed(() => globalStore.sideBgColorGet)
const sideTextColorGet = computed(() => globalStore.sideTextColorGet)
</script>

<style scoped lang="scss">
@import './index.scss';
</style>

<!-- <style lang="scss">
.classic {
	.el-sub-menu.is-active {
		> .el-sub-menu__title {
			color: var(--el-color-primary) !important;
		}
	}
	&.rect {
		.el-menu,
		.el-menu--popup {
			.el-menu-item {
				&:hover,
				&.is-active {
					background: var(--el-color-primary-light-9);
					&::before {
						position: absolute;
						top: 0;
						bottom: 0;
						left: 0;
						width: 4px;
						content: '';
					}
				}
				&.is-active::before {
					background: var(--el-color-primary);
				}
			}
		}
	}
	&.round {
		.el-menu,
		.el-menu--popup {
			.el-menu-item {
				&:hover,
				&.is-active {
					background: transparent !important;
					&::before {
						position: absolute;
						right: 8px;
						left: 8px;
						width: auto;
						height: 40px;
						margin: auto;
						content: '';
						background: var(--el-color-primary-light-9);
						border-radius: var(--sloth-side-menu-radius);
					}
					> span {
						position: relative;
					}
				}
				&.is-active {
					color: var(--el-color-primary);
					&::before {
						background: var(--el-color-primary-light-9);
					}
				}
			}
		}
	}

	// guide
	#driver-highlighted-element-stage {
		background-color: #606266 !important;
	}
}
</style> -->
